<template>
    <div class="avatar">
        <img v-for="(item,index) in avatarlist" 
        :key="item"  
        :src="item"
        :class="{active:avatarIndex === index}"
        @click="$emit('change',index)"
        >
    </div>
</template>

<script>
export default {
    props:['avatarIndex','avatarlist']
}
</script>

<style lang='scss'>
.avatar{
    img{
        vertical-align: middle;
        width: 30px;
        height: 30px;
        border-radius: 4px;
        margin: 0 4px;
        opacity: 0.6;
        &:hover,&.active{
            opacity: 1;
            border: 1px solid #f60;
        }
    }
}
</style>